<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 产品列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="query.type" @tab-click="typeChange">
        <el-tab-pane label="产品列表" name="0"></el-tab-pane>
        <el-tab-pane v-if="threeLevelsbool.shenheList" label="产品审核" name="1"></el-tab-pane>
      </el-tabs>
      <div class="handle-box">
        <el-button v-if="query.type == '0'" type="primary" class="handle-del mr10" @click="addBtnClick">新增</el-button>
        <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-input placeholder="请输入产品名称查询" v-model="query.souVal" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      </div>
      <el-table v-loading="tableLoad" :data="tableData" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="pbName" label="产品名称" width="200">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="editClick(scope.row.pbId,'browse')">{{scope.row.pbName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="产品分类" width="180"></el-table-column>
        <el-table-column prop="quotaMin" label="额度上限" width="100">
          <template slot-scope="scope">
            {{scope.row.quotaMin == scope.row.quotaMax ? scope.row.quotaMax+"万" : scope.row.quotaMin+"万-"+scope.row.quotaMax+"万"}}
          </template>
        </el-table-column>
        <el-table-column prop="todayViewNum" label="今日浏览" width="100"></el-table-column>
        <el-table-column prop="todayApplyNum" label="今日申请" width="100"></el-table-column>
        <el-table-column prop="viewNum" label="总浏览量" width="100"></el-table-column>
        <el-table-column prop="applyNum" label="总申请量" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column fixed="right" label="是否上架" width="120" align="center">
          <template slot-scope="scope">
            <el-switch active-value="1" inactive-value="0" v-model="scope.row.isShow" active-color="#13ce66" inactive-color="#ff4949"
                       @change="upClick(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="上架审核状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pbStatus == '1'" type="success">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.pbStatus == '2'">审核失败</el-tag>
            <el-tooltip :content="scope.row.pbFailReason" placement="bottom" effect="light" v-if="scope.row.pbStatus == '2'">
              <i class="el-icon-warning-outline" :style="{color:'red',marginLeft:'5px'}"></i>
            </el-tooltip>
            <el-tag v-if="scope.row.pbStatus == '0'">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="query.type == '0'" type="text" icon="el-icon-edit" class="red" @click="editClick(scope.row.pbId,'edit')">编辑</el-button>
            <el-button v-if="query.type == '0'" type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.pbId)">删除</el-button>
            <el-button v-if="query.type == '0'" type="text" icon="el-icon-s-data" class="red" @click="statisticsClick(scope.row.pbId)">统计</el-button>
            <el-button v-if="query.type == '1'" type="text" icon="el-icon-view" class="red" @click="examineOkClick(scope.row)">审核通过</el-button>
            <el-button v-if="query.type == '1'" type="text" icon="el-icon-view" class="red" @click="examineNoClick(scope.row.pbId)">审核不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 统计弹出 -->
    <el-dialog title="近30天统计" :visible.sync="tongFlg" width="800px">
      <div id="myChart" :style="{ width: '800px', height: '500px' }"></div>
    </el-dialog>
    <!-- 审核不通过原因 -->
    <el-dialog title="审核产品" :visible.sync="examineFlg" width="500px">
      <el-form ref="form" label-width="120px">
        <el-form-item label="审核不通过原因">
          <el-input type="textarea" v-model="examineNoText" placeholder="请说明不通过原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineFlg = false">取 消</el-button>
        <el-button type="primary" @click="examineSub" :loading="examineLoad">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 产品 -->
    <shopTemplate ref="shopTemplate" @getTable="getTable"></shopTemplate>

  </div>
</template>

<script>
import shopTemplate from './productListTemplate/shop';
import { productGetTable, productListDel, productListTong, productListUp, productListExamine, RolePermissionsQX } from '../../../api/index'
export default {
  data() {
    return {
      tableLoad: false,
      query: {
        page: 1,
        limit: 10,
        time: [],
        souVal: '',
        totalCount: 0,
        type: '0'
      },
      tableData: [],

      tongFlg: false,
      tongDate: [],
      tongtitle: ["浏览量", "申请量"],
      tongLiuList: [],
      tongShengList: [],

      examineLoad: false,
      examineFlg: false,
      examineNoText: '',
      examineNoId: '',

      threeLevelsbool: {
        shenheList: false,
      }
    };
  },
  components: {
    shopTemplate
  },
  created() {
    this.getTable();
    this.threeLevels();
  },
  methods: {
    //列表获取
    getTable() {
      this.tableLoad = true;
      let query = {
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        kw: this.query.souVal,
        type: this.query.type,
      }
      productGetTable(query).then((res) => {
        this.tableLoad = false;
        if (res.code == 0) {
          res.recordList.forEach(item => {
            item.okShen = false;
            item.isShow = String(item.isShow);
          })
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //新增
    addBtnClick() {
      this.$refs.shopTemplate.addBtnClick();
    },
    //修改
    editClick(id, flg) {
      this.$refs.shopTemplate.editInit(id, flg);
    },
    //删除
    delClick(id) {
      this.$confirm('确定删除当前产品吗？', '删除产品', {
        type: 'warning',
      }).then(() => {
        productListDel({ deleteId: id }).then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getTable();
          } else {
            this.$message(res.msg);
          }
        })
      })
    },
    //统计查看
    statisticsClick(id) {
      this.tongFlg = true;
      productListTong({ productId: id }).then((res) => {
        if (res.code == 0) {
          //日期提取
          let dataArr = [];
          if (res.applyList && res.viewList) {
            dataArr = res.viewList.map(item => {
              return item.time;
            })
          }
          //浏览量
          let viewArr = [];
          dataArr.forEach((item, i) => {
            try {
              res.viewList.forEach((e, index) => {
                if (item == e.time) {
                  viewArr.push(e.num);
                  throw new Error();
                } else {
                  if (index == res.viewList.length - 1) {
                    viewArr.push(0);
                  }
                }
              })
            } catch { }
          });
          //申请量
          let applyArr = [];
          dataArr.forEach((item, i) => {
            try {
              res.applyList.forEach((e, index) => {
                if (item == e.time) {
                  applyArr.push(e.num);
                  throw new Error();
                } else {
                  if (index == res.applyList.length - 1) {
                    applyArr.push(0);
                  }
                }
              })
            } catch { }
          });
          console.log(viewArr)
          this.tongDate = dataArr;
          this.tongLiuList = viewArr;
          this.tongShengList = applyArr;
          setTimeout(() => {
            this.tongInit();
          }, 0)
        } else {
          this.$message(res.msg);
        }
      })

    },
    //初始化统计图
    tongInit() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.tongDate
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: that.tongtitle
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [{
          name: '浏览量',
          data: that.tongLiuList,
          type: 'line',
          label: {
            show: true,
            position: 'top'
          },
        },
        {
          name: '申请量',
          data: that.tongShengList,
          type: 'line',
          label: {
            show: true,
            position: 'top'
          },
        }]
      });
    },
    //切换列表状态
    typeChange() {
      this.getTable();
    },
    //点击审核通过
    examineOkClick(item) {
      this.$confirm('确定审核通过吗？', '审核产品', {
        type: 'warning',
      }).then(() => {
        item.okShen = true;
        productListExamine({ productId: item.pbId, status: 1, reason: '' }).then((res) => {
          item.okShen = false;
          if (res.code == 0) {
            this.$message.success("审核通过成功");
            this.getTable();
          } else {
            this.$message(res.msg);
          }
        })
      })
    },
    //审核不通过
    examineNoClick(id) {
      this.examineFlg = true;
      this.examineNoText = '';
      this.examineNoId = id;
    },
    //审核不通过提交
    examineSub() {
      if (!this.examineNoText) {
        this.$message("请填写不通过原因");
        return false;
      }
      this.examineLoad = true;
      productListExamine({ productId: this.examineNoId, status: 2, reason: this.examineNoText }).then((res) => {
        this.examineLoad = false;
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.examineFlg = false;
          this.getTable();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getTable();
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getTable();
    },
    //选中
    SelectionChange() { },
    //上架操作
    upClick(item) {
      productListUp({ productId: item.pbId, isShow: item.isShow }).then(res => {
        if (res.code == '0') {
          this.$message.success("操作成功");
        } else {
          item.isShow = item.isShow == '0' ? '1' : '0';
          this.$message(res.msg);
        }
      })
    },
    //三级权限
    threeLevels() {
      let parentRouth = this.$route.path.replace('/', '');
      RolePermissionsQX({ urlName: parentRouth }).then((res) => {
        if (res.code === 0) {
          res.buttons.forEach((item, i) => {
            switch (item.name) {
              case '产品审核':
                this.threeLevelsbool.shenheList = item.pageIsShow;
                break;
            }
          });
        } else {
          this.$message(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
</style>
